<template>
  <div class="write">
    <van-search
          v-model="value"
          show-action
          shape="round" class="write-sea"
          background="#3e9df8"
          placeholder="写评论"
          @search="onSearch"
        >
          <template #action>
            <van-button type="danger" size="small" @click="onSearch">发送</van-button>
          </template>
        </van-search>
  </div>
</template>

<script>
import { apiAddComment, apiAddReply } from '@/api/comment.js'

export default {
  // 是否是回复面板： true-》评论的回复；false-》写评论
  props: ['isReply', 'comid'],
  data () {
    return {
      value: ''
    }
  },
  methods: {
    async onSearch () {
      if (this.value === '') {
        this.$toast.fail('请先输入内容')
        return
      }
      if (this.isReply) {
        // true->写回复
        const res = await apiAddReply({
          comid: this.comid.toString(),
          content: this.value,
          artid: this.$route.params.artid
        })
        // console.log('评论的回复', res)
        const newCom = res.data.new_obj
        this.$emit('passCom', newCom)
        this.value = ''
      } else {
        // false->写评论
        const res = await apiAddComment({
          artid: this.$route.params.artid,
          content: this.value
        })
        // console.log('评论', res)
        const newCom = res.data.new_obj
        // 将数据传给父组件渲染
        this.$emit('passCom', newCom)
        this.value = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.write {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;

  .write-sea{
    width: 100%;
  }

  /deep/.van-search__action:active {
    background-color: #3e9df8;
  }
}
</style>
